<template>
  <uni-nav-bar title="客户详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar right-text="编辑"
    @clickRight="openPopup"></uni-nav-bar>
  <Custoinfor ref="custoinfors"></Custoinfor>
  <!-- 切换 -->
  <z-tabs ref="tabs" :list="list" :current="current" @change="tabsChange" inactive-color="#333" />
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height:current===0?pageHeights + 'px':pageHeight + 'px' }">
    <view class="package_sale" v-for="item in orderLists" :key="item.id" :style="{display:current===0?'block':'none'}">
      <view>{{item.des}}</view>
      <view style="margin-top:10rpx;">{{item.createtime}}</view>
    </view>
    <FillingList :orderLists="orderLists" :status="true" v-if="current===1"></FillingList>
    <AccountList :orderLists="orderLists" v-if="current===2"></AccountList>
    <Popu v-if="current===0&&orderLists.length<1" :pageHeight="pageHeights" text="暂无备注"></Popu>
    <Popu v-if="current===1&&orderLists.length<1" :pageHeight="pageHeight" text="暂无加注订单"></Popu>
    <Popu v-if="current===2&&orderLists.length<1" :pageHeight="pageHeight" text="暂无充值订单"></Popu>
  </scroll-view>
  <view class="add" v-if="current===0" @click="addDeatil('notes')">新增备注</view>
  <view style="width:100%;height:1px;"></view>
  <Association :title="title" :place="place" ref="ation" @submit="submit"></Association>
  <EditPopup ref="popup" @submit="renew"></EditPopup>
</template>

<script setup lang="ts">
  import Custoinfor from '@c/earthPushing/customer/custoinfor.vue';
  import EditPopup from '@c/earthPushing/customer/editPopup.vue';
  import Popu from '@c/earthPushing/common/popu.vue';
  import Association from '@c/earthPushing/bullet-box/association.vue';
  import { navBack } from '@/utils/navigator';
  import FillingList from '@c/earthPushing/list/fillingList.vue';
  import AccountList from '@c/earthPushing/list/accountList.vue';
  import { fillingOrder } from '@/gql/filling';
  import { CapitalDetails } from '@/gql/user';
  import { ref, onMounted } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { getUserDes } from '@/gql/earthPushing/custom';
  import { toPublish } from '@mqtt';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  // static
  const staff_id = getDriverID();
  const list = [{ name: '备注' }, { name: '加注订单' }, { name: '充值订单' }]
  const current = ref(0)
  const tabs = ref(null)
  const popup = ref(null)
  const custoinfors = ref(null)
  const ation = ref(null)
  const pageHeight = ref();
  const pageHeights = ref()
  const user_id = ref('')
  const orderLists = ref([]);
  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const title = ref('')
  const place = ref('')
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 95;
      pageHeights.value = res.windowHeight - 150;
    },
  });
  onLoad((pearm) => {
    user_id.value = pearm.id
    init()
  })
  onMounted(() => {
    custoinfors.value.init(user_id.value)
  })
  function renew() {
    custoinfors.value.init(user_id.value)
  }
  function init() {
    showLoading()
    isLoading.value = true;
    switch (current.value) {
      case 0:
        remarks()
        break;
      case 1:
        fillOrder()
        break;
      case 2:
        Recharge()
        break;
    }
  }
  function remarks() {
    const payload = {
      query: getUserDes,
      variables: {
        page: currentPage.value,
        user_id: Number(user_id.value)
      },
    };
    toPublish(
      'ql/staff/getUserDes',
      payload,
      (obj : any) => {
        const { getUserDes } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getUserDes.list];
        lastPage.value = getUserDes.lastpage;
      },
    );
  }
  function fillOrder() {
    const payload = {
      query: fillingOrder,
      variables: {
        page: currentPage.value,
        driver_id: Number(user_id.value),
      },
    };
    toPublish(
      'ql/driver/getOrderList',
      payload,
      (obj : any) => {
        const { fill_order_list } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...fill_order_list.list];
        lastPage.value = fill_order_list.lastpage;
      })
  }
  function Recharge() {
    const payload = {
      query: CapitalDetails,
      variables: {
        page: currentPage.value,
        driver_id: Number(user_id.value),
        type: 'count',
        scene: 9,
      },
    };
    toPublish(
      'ql/driver/moneylogList',
      payload,
      (obj : any) => {
        const { moneylog_list } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...moneylog_list.list];
        lastPage.value = moneylog_list.lastpage;
      })
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  //tabs通知swiper切换
  function tabsChange(index : number) {
    current.value = index;
    currentPage.value = 1
    orderLists.value = []
    init()
  }
  /**
   * 打开/关闭车牌弹框
   */
  function addDeatil(state : string) {
    title.value = "备注"
    place.value = "请输入备注"
    ation.value.open()
  }
  function submit(des : string) {
    ation.value.close()
    showLoading()
    const payload = {
      staff_id,
      driver_id: Number(user_id.value),
      des,
    };
    toPublish('staff/addStaffUsersDes',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          currentPage.value = 1
          orderLists.value = []
          init()
        } else {
          errorToast(msg)
        }
      }
    );
  }
  // 打开/关闭编辑弹框
  function openPopup() {
    popup.value.getStaff()
    popup.value.open();
  }
</script>

<style scoped lang="less">
  .add {
    width: 30%;
    height: 71rpx;
    background: #558AF1;
    border-radius: 5px;
    text-align: center;
    line-height: 71rpx;
    color: #fff;
    margin: 15rpx auto;
  }
</style>